import React, { useEffect, useState } from 'react';
import PropTypes from 'prop-types';
import { getCompany, queryrisklist } from "@/request/api.js";

import { Button, Radio, Table, Modal, Form,Input  } from 'antd';

const HookEg = () => {
    let [num, setNum] = useState(0)
    let [company, setCompany] = useState([])
    let [value, setValue] = useState('')
    let [tableList, setTableList] = useState([])
    let [isModalOpen, setIsModalOpen] = useState(false)
    // 表单
    const [form] = Form.useForm();

    const columns = [
        {
            title: '险种名称',
            dataIndex: 'riskName',
            key: 'riskName',
        },
        {
            title: '创建人',
            dataIndex: 'createUserName',
            key: 'createUserName',
        },
    ]
    const addNum = () => {
        setNum(num++)
    }
    useEffect(() => {
        getCompany().then(res => {
            if (+res.code === 200) {
                setCompany(res.data.slice(0, 5))
                setValue(res.data.slice(0, 5)[0].companyCode)
                getTableList(res.data.slice(0, 5)[0].companyCode)
            }
        })

    }, [])
    const getTableList = (value) => {
        queryrisklist({ "pageSize": 10, "pageNum": 1, "insuranceCode": value }).then(res => {
            if (+res.code === 200) {
                setTableList(res.data.records)
            }
        })
    }
    // 打开弹框
    const openModal = () => {
        setIsModalOpen(true);
    }
    // 弹框确认
    const handleOk = e => {
        handleCancel()
    }
    // 弹框取消
    const handleCancel = e => {
        form.resetFields();
        setIsModalOpen(false);
    }
    const onFinish = (values) => {
        console.log('Success:', values);
    }
    return (
        <div>
            <hr />
            {num}
            <Button type="primary" onClick={addNum}>增加</Button>
            <br />
            <Radio.Group value={value} buttonStyle="solid" onChange={e => {
                setValue(e.target.value)
                getTableList(e.target.value)
            }}>
                {
                    company.map(item => {
                        return <Radio.Button value={item.companyCode} key={item.companyCode}>{item.name}</Radio.Button>
                    })
                }
            </Radio.Group>
            <Button onClick={openModal}>新增</Button>
            <Table columns={columns} dataSource={tableList} rowKey={(record) => record.id} />
            <Modal title="Basic Modal" open={isModalOpen} onOk={handleOk} onCancel={handleCancel}>
                <Form
                    name="basic"
                    labelCol={{
                        span: 8,
                    }}
                    wrapperCol={{
                        span: 16,
                    }}
                    style={{
                        maxWidth: 600,
                    }}
                    initialValues={{
                        remember: true,
                    }}
                    onFinish={onFinish}
                    autoComplete="off"
                    form={form}
                    
                >
                    <Form.Item
                        label="Username"
                        name="username"
                        rules={[
                            {
                                required: true,
                                message: 'Please input your username!',
                            },
                        ]}
                    >
                        <Input />
                    </Form.Item>

                    <Form.Item
                        label="Password"
                        name="password"
                        rules={[
                            {
                                required: true,
                                message: 'Please input your password!',
                            },
                        ]}
                    >
                        <Input.Password />
                    </Form.Item>

                    <Form.Item
                        wrapperCol={{
                            offset: 8,
                            span: 16,
                        }}
                    >
                        <Button type="primary" htmlType="submit">
                            Submit
                        </Button>
                    </Form.Item>
                </Form>
            </Modal>
        </div>
    );
};


HookEg.propTypes = {

};


export default HookEg;
